<template>
  <cloudPage>
    <view class="container" style="
    position: absolute;
    top: 0;
    padding-top: 0;"
    >
      <!-- banner轮播 -->
      <view>
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          :circular="true"
        >
          <swiper-item
            class="swiper_item"
            v-for="(item, index) in banner"
            :key="index"
          >
            <image :src="item" class="swiper_image" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 系统公告 -->
      <view class="p-32" style="maring-bottom: 36rpx">
        <view
          class="notice flex"
          @tap.stop="handleNavTo({ url: '/pages/mf/announce/index' })"
        >
          <image src="/static/woniu/notice.png" class="notice_icon" />
          <swiper
            class="swiper_notice flex1"
            :indicator-dots="false"
            :autoplay="true"
            :interval="3000"
            :duration="500"
            :circular="true"
            :vertical="true"
          >
            <swiper-item
              class="swiper_item"
              v-for="(item, index) in announcement.data"
              :key="index"
            >
              <view class="notice_text" style="color: #000000;">{{ item.value.title }}</view>
            </swiper-item>
          </swiper>
          <image
            src="/static/mf/home/arrow.png"
            style="
            width: 19rpx;
            height: 32rpx;
            filter: saturate(1);
            "
          />
        </view>
      </view>
      <!-- FIL矿池 -->

		<view class="box p-20">
			<view class="box-info">
				<view class="box-title">
					<image src="/static/woniu/index-data.png"></image>
					矿池数据
				</view>
				<view class="box-content">
					<view class="box-item">
						<view class="box-item-title">FIL矿池</view>
						<view class="box-item-content">
							<view class="content-title">全网算力</view>
							<view class="content-info">{{
              block && block.total_quality_power
            }}</view>
						</view>
						<view class="box-item-money">
							<view class="money-title">算力收益(FIL/T)</view>
							<view class="money-info">{{
                block && parseFloat(block.fil_per_tera).toFixed(4)
              }}
              FIL/T</view>
						</view>
					</view>
					<view class="box-item">
						<view class="box-item-title">BTC矿池</view>
						<view class="box-item-content">
							<view class="content-title">全网算力</view>
							<view class="content-info">{{
              block && block.total_quality_power
            }}</view>
						</view>
						<view class="box-item-money">
							<view class="money-title">算力收益(FIL/T)</view>
							<view class="money-info">{{
                block && parseFloat(block.fil_per_tera).toFixed(4)
              }}
              FIL/T</view>
						</view>
					</view>
					<view class="box-item">
						<view class="box-item-title">ETH矿池</view>
						<view class="box-item-content">
							<view class="content-title">全网算力</view>
							<view class="content-info">{{
              block && block.total_quality_power
            }}</view>
						</view>
						<view class="box-item-money">
							<view class="money-title">算力收益(FIL/T)</view>
							<view class="money-info">{{
                block && parseFloat(block.fil_per_tera).toFixed(4)
              }}
              FIL/T</view>
						</view>
					</view>
				</view>
			</view>

      <!-- 币种价格 -->
				<view class="imm-title">
					<image src="/static/woniu/index-time.png"></image>
					<text>实时行情</text>
				</view>
      <view class="p-20rpx">
        <view class="symbol_box" style="padding: 0;height: unset;">
          <block v-for="(item, index) in assets" :key="index">
            <view class="aymbol_list flex" style="height: 40px;border-bottom: unset;" v-if="item.symbol != 'USDT' && item.symbol != 'M'">
              <image
                :src="`/static/mf/home/coin/${item.symbol}.png`"
                class="symbol_icon"
              />
              <view class="imm-item-title">{{ item.symbol }}</view>
              <view class="imm-item-price" style="margin-left: auto;"
                >${{ item.coin.price.USDT }}</view
              >
              <view class="profit" style="margin-left: auto;">{{ item.change_ratio }}%</view>
              <image
                src="/static/woniu/index-up.png"
                class="tatio_icon"
                v-if="parseFloat(item.change_ratio) > 0"
              />
              <image src="/static/woniu/index-down.png" class="tatio_icon" v-else />
            </view>
          </block>
        </view>
      </view>
    </view>

		</view>

      <view class="fil_box" style="display: none;">
        <view class="fil_box_title">{{ $t("mf.home.filmining") }}</view>
        <view class="flex" style="margin-bottom: 40rpx">
          <view class="flex1">
            <view class="fil_data_title">{{ $t("block.block_height") }}</view>
            <view class="fil_data_numbe">{{
              block && block.latest_height
            }}</view>
          </view>
          <view class="flex1"
            ><view class="fil_data_title">{{ $t("block.WinCount") }}</view>
            <view class="fil_data_numbe"
              >{{
                block && parseFloat(block.latest_block_reward).toFixed(2)
              }}
              FIL</view
            ></view
          >
        </view>
        <view class="flex">
          <view class="flex1">
            <view class="fil_data_title">{{ $t("block.Power") }}</view>
            <view class="fil_data_numbe"
              >{{
                block && parseFloat(block.fil_per_tera).toFixed(4)
              }}
              FIL/T</view
            >
          </view>
          <view class="flex1"
            ><view class="fil_data_title">{{
              $t("block.QualityAdjPower")
            }}</view>
            <view class="fil_data_numbe">{{
              block && block.total_quality_power
            }}</view></view
          >
        </view>
      </view>

  </cloudPage>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import homeBox from "./compontents/homeBox";
export default {
  components: {
    homeBox,
  },
  data() {
    return {
      languageShow: false,
      block: null,
    };
  },
  methods: {
    ...mapActions("asset", ["loadAssets"]),
    ...mapActions("mf/home", ["loadArticleList", "getfilInfo"]),
    ...mapActions("announcement", ["loadAnnouncement"]),
    ...mapActions("system", ["switchLocale"]),
    hideMenu() {
      this.languageShow = false;
    },
    onTapSwitchLang(locale) {
      this.switchLocale({ locale });
      this.loadArticleList();
      this.loadAnnouncement();
      this.setTabBarLang({ locale: locale });
      this.hideMenu();
    },
    moreInfoList() {
      // 去资讯列表页面
      this.handleNavTo({ url: "/pages/mf/home/articleList" });
    },
    artcleDetail(id) {
      this.handleNavTo({ url: "/pages/mf/home/articleDetail?id=" + id });
    },
  },
  computed: {
    ...mapState("asset", ["assets"]),
    ...mapGetters("mf/home", ["articleList"]),
    ...mapGetters("announcement", ["announcement"]),
    ...mapGetters("system", ["locales", "locale"]),
    ...mapGetters({ currentLocale: "system/locale" }),
    ...mapGetters("system", ["i18n"]),
    banner() {
      if (this.locale == "zh_TW") {
        return [
          "/static/banner/banner6.jpeg",
          "/static/banner/banner1.jpg",
          "/static/banner/banner2.jpg",
          "/static/banner/banner3.jpg",
          "/static/banner/banner4.jpg",
          "/static/banner/banner5.jpg",
        ];
      } else {
        return [
          "/static/banner/banner6_en.jpeg",
          "/static/banner/banner1.jpg",
          "/static/banner/banner2_en.jpg",
          "/static/banner/banner3_en.jpg",
          "/static/banner/banner4.jpg",
          "/static/banner/banner5_en.jpg",
        ];
      }
    },
  },
  async onShow() {
    console.log(this.currentLocale);
    this.setTabBarLang({ locale: this.currentLocale });
    // await this.loadArticleList({ limit: 5 });
    await this.loadAnnouncement();
    this.block = await this.getfilInfo();
    await this.loadAssets();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 0rpx 100rpx;
  position: absolute;
  top: 50rpx;
}
.swiper {
  width: 100%;
  height: 320rpx;
  border-radius: 10rpx;
}
.swiper_item {
  border-radius: 10rpx;
}
.swiper_image {
  width: 100%;
  height: 320rpx;
}
.notice {
  width: 100%;
  height: 88rpx;
  /* background: rgba(255, 157, 69, 0.1); */
  box-sizing: border-box;
  margin-bottom: 40rpx;
  align-items: center;
  border-bottom: 1px dashed rgba(254, 224, 150, 0.3);
}
.notice_icon {
  width: 36rpx;
  height: 36rpx;
}
.swiper_notice {
  height: 88rpx;
  /* width: 460rpx; */
  line-height: 88rpx;
  box-sizing: border-box;
  padding: 0 40rpx;
}
.notice_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 230, 123, 1);
}
.nav_item {
  width: 100%;
  box-sizing: border-box;
  padding: 0 100rpx;
  border-bottom: 1px solid #ebebeb;
}
.fil_data {
  width: 100%;
  background: #121624;
  border-radius: 8rpx;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  text-align: center;
}
.fil_data_box {
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
  height: 124rpx;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  padding-top: 20rpx;
}
.bdbr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.bdtl {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.fil_data_title {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #898989;
  line-height: 33rpx;
  margin-bottom: 10rpx;
  transform: scale(0.9);
}
.fil_data_numbe {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  line-height: 42rpx;
}
.asstes_list {
  height: 87rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  text-align: center;
  line-height: 87rpx;
  color: #fff;
  align-items: center;
  text-align: left;
}
.symbol_name {
  margin-right: 60rpx;
  width: 100rpx;
}
.asstes_list image {
  width: 40rpx;
  height: 40rpx;
  margin-left: 50rpx;
  margin-right: 20rpx;
}
.asstes_list:last-child {
  border-bottom: none;
}
.info_box {
  width: 100%;
  background: #121624;
  border-radius: 10px;
  overflow: hidden;
}
.info_item {
  width: 100%;
  height: 227rpx;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30rpx 20rpx;
}
.info_item_left {
  box-sizing: border-box;
  padding: 12rpx 0 12rpx;
}
.info_item_right {
  width: 223rpx;
  height: 167rpx;
  margin-left: 30rpx;
}
.info_item_right image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.info_item_title {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 40rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.info_publisher {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}
.info_item_info {
  line-height: 42rpx;
}
.change_ratio {
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

#up_down_image {
  width: 10px;
  height: 34rpx;
  margin-right: 30rpx;
  margin-left: 20rpx;
}
.p-32 {
  box-sizing: border-box;
  padding: 0 32rpx;
}
.p-20 {
  padding: 20rpx;
  box-sizing: border-box;
}
.fil_box {
  width: 100%;
  height: 354rpx;
  padding: 19rpx 68rpx;
  box-sizing: border-box;
  background-image: url("/static/mf/home/kuangchi_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.fil_box_title {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 45rpx;
  margin-bottom: 50rpx;
}
.symbol_box {
  width: 100%;
  height: 658rpx;
  padding: 0 46rpx;
  box-sizing: border-box;
}
.aymbol_list {
  width: 100%;
  height: 154rpx;
  border-bottom: 1px solid rgba(254, 224, 150, 0.3);
  align-items: center;
}
.aymbol_list:last-child {
  border-bottom: none;
}
.symbol_icon {
  width: 66rpx;
  height: 66rpx;
  margin-right: 30rpx;
}
.symbol_text {
  width: 70rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 45rpx;
  margin-right: 80rpx;
}
.symbol_price {
  height: 37rpx;
  font-size: 32rpx;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 38rpx;
}
.symbol_ratio {
  width: 100rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #ffffff;
  line-height: 37rpx;
  margin-right: 13rpx;
  text-align: right;
}
.tatio_icon {
  width: 17rpx;
  height: 25rpx;
  margin-right: 20rpx;
}
page{
		height: 100%;
		background-color: #f5f5f5;
		color: #222;
	}
	.swiper {
		height: 360rpx;
		width: 702rpx;
		margin: 20rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.notice{
		display: flex;
		width: 702rpx;
		margin: 0 auto;
		justify-content: space-between;
}
		.notice-text{
			display: flex;
			align-items: center;
		}
		image{
			width: 38rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}

	.box{
		width: 702rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
    }
		.box-title{
			display: flex;
			align-items: center;
			color: #222222;
			font-size: 32rpx;
			font-weight: bold;
      }
			image{
				width: 42rpx;
				height: 42rpx;
				margin-right: 20rpx;
			}

		.box-content{
			margin-top: 20rpx;
			display: flex;
      }
			.box-item{
				text-align: center;
				border: 1rpx solid #CCCCCC;
				background-color: #F9FAFC;
				padding: 20rpx;
				width: 214rpx;
        }
				.box-item-title{
					color: #222222;
					font-size: 30rpx;
					font-weight: bold;
				}
				.box-item-content{
					margin-top: 20rpx;
          }
					.content-title{
						color: #999999;
						font-size: 24rpx;
					}

				.box-item-money{
					 margin-top: 20rpx;
           }
					.money-title{
						color: #999999;
						font-size: 24rpx;
					}




.imm-title{
			  margin-top: 40rpx;
			 display: flex;
			 align-items: center;
}
image{
				 margin-right: 20rpx;
				 width: 42rpx;
				 height: 42rpx;
}

.imm-item{
			 margin-top: 40rpx;
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
}
.imm-item-img{
				 display: flex;
				 align-items: center;
}
				 image{
					 width: 44rpx;
					 height: 44rpx;
					 margin-right: 20rpx;
}

		 .profit{
			 display: flex;
			 align-items: center;
       }
			 image{
				 width: 20rpx;
				 height: 28rpx;
				 margin-left: 15rpx;
			 }
.symbol_icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
}

</style>
